<template>
  <a-modal
    :visible="visible"
    title="中期考核"
    :width = "1200"
    style="top: 20px;"
    :bodyStyle="{
      'max-height': '75vh',
      overflow: 'auto'
    }"
    :okText="isCheck ? '提交审核' : '导出中期考核' "
    @cancel="() => { tableData = [];$emit('cancel') }"
    @ok="confirm"
  >
    <detail-list :col="4">
      <detail-list-item term="学号">{{ detail.xh }}&nbsp;</detail-list-item>
      <detail-list-item term="姓名">{{ detail.xm }}&nbsp;</detail-list-item>
      <detail-list-item term="学生类别">{{ detail.xslbmc }}&nbsp;</detail-list-item>
      <detail-list-item term="院系">{{ detail.ssyxmc }}&nbsp;</detail-list-item>
      <detail-list-item term="专业">{{ detail.sszymc }}&nbsp;</detail-list-item>
      <detail-list-item term="研究方向">{{ detail.yjfxmc }}&nbsp;</detail-list-item>
      <detail-list-item term="导师姓名">{{ detail.dsxm }}&nbsp;</detail-list-item>
      <detail-list-item term="中期考核状态">{{ detail.zqkhztmc }}&nbsp;</detail-list-item>
    </detail-list>
    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="个人总结" key="1">
        <div style="margin: 10px 0;font-weight: bold;font-size: 14px;">一、思想品德、行为表现、综合素质</div>
        {{ detail.grpzzj }}
        <div style="margin: 10px 0;font-weight: bold;font-size: 14px;">二、参加科研项目、学术会议及发表论文情况</div>
        {{ detail.kyqkzj }}
        <div style="margin: 10px 0;font-weight: bold;font-size: 14px;">三、奖惩情况</div>
        {{ detail.jlqk }}
        <div style="margin: 10px 0;font-weight: bold;font-size: 14px;">四、身心状况</div>
        {{ detail.sxzk }}
      </a-tab-pane>
      <a-tab-pane tab="课程学习情况" key="2">
        <a-table
          rowKey="index"
          :columns="kcColumns"
          :dataSource="detail.pyjhkcList"
          size="middle"
          :pagination="false"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
        </a-table>
      </a-tab-pane>
    </a-tabs>
    <!-- <div style="margin: 10px 0;font-weight: bold;font-size: 14px;">一、思想品德、行为表现、综合素质</div>
    {{ detail.zhszqk }}
    <div style="margin: 10px 0;font-weight: bold;font-size: 14px;">二、参加科研项目、学术会议及发表论文情况</div>
    {{ detail.kyqkzj }}
    <div style="margin: 10px 0;font-weight: bold;font-size: 14px;">三、奖惩情况</div>
    {{ detail.jlqk }}
    <div style="margin: 10px 0;font-weight: bold;font-size: 14px;">四、身心状况</div>
    {{ detail.sxzk }} -->
    <div style="margin: 10px 0;font-weight: bold;font-size: 15px;">导师审核结果</div>
    <detail-list :col="1">
      <detail-list-item term="导师审核意见">{{ detail.zqkhztxx.dsshyj }}&nbsp;</detail-list-item>
    </detail-list>
    <template v-if="!isCheck && (detail.zqkhjg == '01' || detail.zqkhjg == '02')">
      <div style="margin: 10px 0;font-weight: bold;font-size: 15px;">考核小组评议意见</div>
      <detail-list :col="1">
        <detail-list-item term="学位论文进展情况">{{ detail.zqkhztxx.xwlwjzqk }}&nbsp;</detail-list-item>
        <detail-list-item term="存在的主要问题和改进建议">{{ detail.zqkhztxx.xwlwwthjy }}&nbsp;</detail-list-item>
        <detail-list-item term="综合评价及考核等级建议">{{ detail.zqkhztxx.xwlwzhpj }}&nbsp;</detail-list-item>
      </detail-list>
      <div style="margin: 10px 0;font-weight: bold;font-size: 15px;">院系审核结果</div>
      <detail-list :col="1">
        <detail-list-item term="思想品德和科学作风考评">{{ detail.zqkhztxx.sxzfkpyj }}&nbsp;</detail-list-item>
        <!-- <detail-list-item term="考核小组评议意见">{{ detail.khxzyj }}&nbsp;</detail-list-item> -->
        <detail-list-item term="院系审核意见">{{ detail.zqkhztxx.yxshyj }}&nbsp;</detail-list-item>
        <detail-list-item term="考核结果">{{ detail.zqkhjgmc }}&nbsp;</detail-list-item>
      </detail-list>
    </template>
    <a-form v-if="isCheck" :form="form">
      <div style="margin: 5px 0;font-weight: bold;font-size: 14px;">院系审核意见</div>
      <a-form-item
        label=" 思想品德和科学作风考评"
        :labelCol="{span: 5,offset: 1}"
        :wrapperCol="{span: 12, offset: 1}">
        <a-textarea v-decorator="['sxzfkpyj',
          {
            rules: [{ required: true, message: '请输入思想品德和科学作风考评!' }],
          }]" />
      </a-form-item>
      <div style="margin: 5px 0;font-weight: bold;font-size: 14px;">考核小组评议意见</div>
      <a-form-item
        label=" 学位论文进展情况"
        :labelCol="{span: 5,offset: 1}"
        :wrapperCol="{span: 12, offset: 1}">
        <a-textarea v-decorator="['xwlwjzqk',
          {
            rules: [{ required: true, message: '请输入学位论文进展情况!' }],
          }]" />
      </a-form-item>
      <a-form-item
        label=" 存在的主要问题和改进建议"
        :labelCol="{span: 5,offset: 1}"
        :wrapperCol="{span: 12, offset: 1}">
        <a-textarea v-decorator="['xwlwwthjy',
          {
            rules: [{ required: true, message: '请输入存在的主要问题和改进建议!' }],
          }]" />
      </a-form-item>
      <a-form-item
        label=" 综合评价及考核等级建议"
        :labelCol="{span: 5,offset: 1}"
        :wrapperCol="{span: 12, offset: 1}">
        <a-textarea v-decorator="['xwlwzhpj',
          {
            rules: [{ required: true, message: '请输入综合评价及考核等级建议!' }],
          }]" />
      </a-form-item>
      <div style="margin: 5px 0;font-weight: bold;font-size: 14px;">考核专家</div>
      <a-table
        rowKey="index"
        :columns="zjcolumns"
        :dataSource="tableData"
        :pagination="false"
      >
        <template v-for="col in ['xm', 'zc','dw','zy']" :slot="col" slot-scope="text, record">
          <a-input v-if="record.editable" :key="col" v-model="record[col]"/>
          <div v-else :key="col">{{ record[col] }}</div>
        </template>
        <template slot="action" slot-scope="text,record,index">
          <a v-if="record.editable" @click="completeAdd(record)">完成</a>
          <a v-else @click="remove(index)">删除</a>
        </template>
      </a-table>
      <a-button style="width: 100%; margin-top: 14px; margin-bottom: 8px" type="dashed" icon="plus" @click="newRow">新增行</a-button>
      <div style="margin: 10px 0;font-weight: bold;font-size: 14px;">院系审核结果</div>
      <a-form-item
        label="审核结果"
        :labelCol="{span: 3,offset: 1}"
        :wrapperCol="{span: 5, offset: 1}">
        <a-select v-decorator="['shjg',
          {
            rules: [{ required: true, message: '请选择院系审核结果!' }],
          }]" >
          <a-select-option v-for="i in TYPE0341" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="院系审核意见"
        :labelCol="{span: 3,offset: 1}"
        :wrapperCol="{span: 12, offset: 1}">
        <a-textarea v-decorator="['shyj']" />
      </a-form-item>
    </a-form>
  </a-modal>

</template>

<script>
import { STable } from '~'
import { mapState } from 'vuex'
import DetailList from '~/tool/DetailList'
const DetailListItem = DetailList.Item

export default {
  props: ['visible', 'isCheck'],
  components: {DetailList, DetailListItem, STable},
  data () {
    return {
      form: this.$form.createForm(this),
      detail: {
        zqkhztxx: {},
        pyjhkcList: []
      },
      tableData: [],
      zjcolumns: [
        {
          title: '姓名',
          scopedSlots: { customRender: 'xm' }
        },
        {
          title: '职称',
          scopedSlots: { customRender: 'zc' }
        },
        {
          title: '工作单位',
          scopedSlots: { customRender: 'dw' }
        },
        {
          title: '专业',
          scopedSlots: { customRender: 'zy' }
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      kcColumns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '课程编号',
          dataIndex: 'kcdm',
        },
        {
          title: '课程名称',
          dataIndex: 'kcmc',
        },
        {
          title: '成绩取得时间',
          dataIndex: 'cjlrsj',
        },
        {
          title: '学分',
          dataIndex: 'xf',
        },
        {
          title: '成绩',
          dataIndex: 'kscj',
        }
      ]
    }
  },
  computed: {
    ...mapState({
      TYPE0341: state => state.app['TYPE0341']
    })
  },
  created () {
    this.$store.dispatch('app/setDictionary', 'TYPE0341')
  },
  methods: {
    newRow () {
      let hasEdit = this.tableData.find(d => {
        return d.editable
      })
      if (hasEdit) {
        return this.$message.warning('请先完成前面的添加')
      }
      this.tableData.push({
        xm: '',
        zc: '',
        dw: '',
        action: '',
        editable: true
      })
    },
    remove (index) {
      this.tableData.splice(index, 1)
    },
    completeAdd (data) {
      if (data.xm && data.zc && data.dw && data.zy) {
        return this.$set(data, 'editable', false)
      }
      this.$message.error('请输入完整的考核专家信息')
    },
    confirm () {
      if (this.isCheck) {
        this.form.validateFields((err, values) => {
          if (err) {
            return
          }
          if (!this.tableData.length) {
            return this.$message.error('考核专家不能为空')
          }
          let params = Object.assign({
            id: this.detail.id,
            khztDTOList: this.tableData
          }, values)
          this.$api.cultivate.midTermCheck(params).then(res => {
            this.$message.success(res.msg)
            this.tableData = []
            this.$emit('cancel')
            this.$emit('refresh')
          })
        })
      } else {
        this.$export(`/foster/zqkhxx/exp/${this.detail.xh}`)
      }
    }
  }
}
</script>

<style>
  .ant-form-item-label {
    text-align: left;
    vertical-align: middle;
    line-height: 39.9999px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
  }
  .ant-col-offset-1 {
    margin-left: 0.16666667%;
  }
</style>
